<template>
  <div class="group-box">
    <el-input v-if="filter" v-model="filterText" placeholder="输入关键字进行过滤" />
    <div v-if="title" class="title" @click="handleNodeClick">{{ title }}</div>
    <div v-if="action" class="btn-area">
      <el-button type="primary" @click="addNode_top()"> 新增 </el-button>
    </div>
    <el-tree
      ref="tree"
      class="tree"
      :data="data"
      node-key="id"
      :draggable="draggable"
      :allow-drag="allowDrag"
      :highlight-current="highlightCurrent"
      :expand-on-click-node="true"
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span class="lable">{{ data.name }}</span>
        <!-- && data.children && data.children.length > 0 -->
        <span v-if="action" class="btn-group">
          <!-- <el-button type="text" size="mini" :icon="editIcon" @click.stop="() => updateNode(node, data)"></el-button> -->
          <el-button type="text" size="mini" :icon="addIcon" @click.stop="() => addNode(node, data)" />
          <el-button type="text" size="mini" :icon="delIcon" @click.stop="() => removeNode(node, data)" />
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
let testid = 1000
export default {
  props: {
    title: {
      default: false
    },
    action: {
      type: Boolean,
      default: false
    },
    editIcon: {
      type: String,
      default: 'el-icon-edit'
    },
    addIcon: {
      type: String,
      default: 'el-icon-plus'
    },
    delIcon: {
      type: String,
      default: 'el-icon-delete'
    },
    data: {
      type: Array,
      default: []
    },
    draggable: {
      type: Boolean,
      default: false
    },
    highlightCurrent: {
      type: Boolean,
      default: false
    },
    filter: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cruData: [],
      isRoot: 0,
      dialogVisible: false,
      form: {
        areaName: ''
      },
      rules: {
        areaName: [{ required: true, message: '请填写名称', trigger: 'blur' }]
      },
      currentbucket: '',
      filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    areaAdd(isRoot) {
      this.isRoot = isRoot
      this.dialogVisible = true
    },
    handleNodeClick(data, node, temp) {
      this.$emit('handleNodeClick', { data, node, temp })
    },
    allowDrag(draggingNode) {
      if (draggingNode.data.type === 'ware') {
        return false
      } else {
        return true
      }
    },

    onSubmit() {
      // isRoot初始值为0，实现当前节点添加子节点数据
      if (this.isRoot === 0) {
        const newChild = { id: testid++, label: this.form.areaName, children: [] }
        if (!this.cruData.children) {
          this.$set(this.cruData, 'children', [])
        }
        this.cruData.children.push(newChild)
        this.dialogVisible = false
      } else {
        // 否则实现外层一级数据的添加，并将isRoot置为初始值0
        const newChild = { id: testid++, label: this.form.areaName, children: [] }
        this.data.push(newChild)
        this.ialogVisible = false
        this.isRoot = 0
        this.dialogVisible = false
      }
    },
    updateNode(node, data) {
      this.$emit('editNode', data)
      // this.$prompt('', '请输入标题', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      // }).then(({ value }) => {
      //   if (value != null) {
      //     data.label = value
      //   }
      // }).catch(() => {
      // });
    },
    addNode_top() {
      this.$emit('addNode', { top: true })
    },
    addNode(node, data) {
      this.$emit('addNode', { top: false, data })
    },

    removeNode(node, data) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('removeNode', data)
        // const parent = node.parent;
        // const children = parent.data.children || parent.data;
        // const index = children.findIndex(d => d.id === data.id);
        // children.splice(index, 1);
      })
    },

    clearChecked() {
      this.$refs['tree'].setCurrentKey()
    },

    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
// .group-box {
//   // width: 223px;
// }

.title {
  height: 46px;
  line-height: 46px;
  padding-left: 20px;
  // background-color: #A11B20;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  // color: #FFFFFF;
  cursor: pointer;
}

.tree {
  border: 1px solid #d8d8d8;
}

::v-deep .el-tree-node__content {
  height: 50px;
  line-height: 25px;

  .lable {
    font-size: 14px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    // font-weight: bold;
  }

  .custom-tree-node {
    width: 100%;
    padding-top: 12px;
    height: 50px;
    border-top: 1px solid #f5f7fa;

    .btn-group {
      float: right;
      margin-top: -9px;
      margin-right: 20px;
    }

    [class^='el-icon-'],
    [class*=' el-icon-'] {
      font-size: 18px;
      color: #acaeb3;
    }
  }
}
.btn-area {
  padding: 10px 0px;
}
</style>
